import { Routes, Route, unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'
import './App.css'
import { AuthComponent } from '@/components/AuthComponents'
import { lazy, Suspense } from 'react'
import { ApolloProvider } from '@apollo/client'
import { client, history } from '@/utils'
// 按需导入组件
const Login = lazy(() => import('./pages/Login'))
const Layout = lazy(() => import('./pages/Layout'))
const Shop = lazy(() => import('./pages/Shop'))
const Reservations = lazy(() => import('./pages/Reservations'))
function App () {
  return (
    // 路由配置
    <HistoryRouter history={history}>
      <ApolloProvider client={client}>
        <div className="App">
          <Suspense
            fallback={
              <div
                style={{
                  textAlign: 'center',
                  marginTop: 200
                }}
              >
                loading...
              </div>
            }
          >
            <Routes>
              <Route path='/' element={
                <AuthComponent>
                  <Layout />
                </AuthComponent>
              }>
                <Route path='/shop' element={<Shop />}></Route>
                <Route index element={<Reservations />}></Route>
                {/* <Route path='reservations' element={<Reservations />}></Route> */}
              </Route>
              <Route path='/login' element={<Login />}></Route>
            </Routes>
          </Suspense>
        </div>
      </ApolloProvider>
    </HistoryRouter>

  )
}

export default App
